<template lang="html">
  <div class="img-group--content">
    <el-upload
    action="https://jyapi.epanshi.com/api/uploadFile/"
    class="avatar-uploader"
    :on-change="changeImg"
    list-type="picture-card"
    :file-list="fileList"
    :http-request="_loadImg"
    :before-remove="_removeImg"
    :limit="5"
    >
    <img v-if="imageUrl" :src="imageUrl" class="avatar">
    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
    <ul class="url-list">
      <li v-for='(item, index) in images' :key='index'>
        <el-button class="el-button el-button--default" size="mini" type='button' @click='addLink(index)'>
          {{!item.url ? '添加链接' : item.url.goods_name}}
        </el-button>
      </li>
    </ul>
    <el-dialog title="选择图片链接" :visible.sync="showModel">
      <el-table  :data="dataList" tooltip-effect="dark" style="width: 100%" @cell-click="handleSelectionChange">
        <el-table-column label="分类" width="120" prop="cat_name"></el-table-column>
        <el-table-column prop="goods_name" label="课程名称" width="120"></el-table-column>
        <el-table-column label="价格" show-overflow-tooltip>
          <template slot-scope='scope'>
            ￥{{scope.row.goods_price}}
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        small
        @current-change='changePage'
        layout="prev, pager, next"
        :total="totalData">
      </el-pagination>
    </el-dialog>
  </div>
</template>

<script>
import ajax from '@/utils/public'
import { addCourseList, selectCourseList } from '@/api/course'
import { loadImg } from '@/api/img'
export default {
  props: [
    'image'
  ],
  data () {
    return {
      dataList: [],
      showModel: false,
      type: 1,
      images: [],
      imageUrl: '',
      fileList: [],
      totalData: 0,
      nowIndex: 1
    }
  },
  watch: {
    image () {
      let ajaxs = []
      let imgs = []
      let fileList = []
      if (this.image) {
        this.image.img.forEach((item) => {
          fileList.push({url: item})
        })
        this.fileList = fileList
        this.image.url.forEach((item, index) => {
          ajaxs.push(selectCourseList({id: item}))
        })
        ajax.fetchAll(ajaxs).then(res => {
          res.forEach((item, index) => {
            imgs.push({img: this.image.img[index], url: item.data.dataList[0]})
          })
          this.images = imgs
          this.$emit('upData', this.images)
        })
      }
    }
  },
  created () {
    this.image.url && this.image.url.forEach((item, index) => {
      selectCourseList({goods_id: item}).then(res => {
        this.images[index] = {img: this.image.img[index], url: res}
      })
    })
    addCourseList({pageSize: 5, is_putaway: 1}).then(res => {
      this.dataList = res.data.dataList
      this.totalData = res.data.total
    })
  },
  methods: {
    handleSelectionChange (row) {
      this.images[this.nowIndex].url = row
      this.$emit('upData', this.images)
      this.showModel = false
    },
    changePage () {
      this._addCourseList()
    },
    _addCourseList (page) {
      addCourseList({page: page, is_putaway: 1}).then(res => {
        this.dataList = res.data.dataList
        this.totalData = res.data.total
      })
    },
    changeImg (file, fileList) {
      fileList.forEach((item, index) => {
        if (JSON.stringify(file.raw) === JSON.stringify(item.raw)) {
          let formData = new FormData()
          formData.append('file', item.raw)
          loadImg(formData).then(res => {
            if (res.code === 1) {
              this.$set(this.images, index, {img: res.data, url: ''})
              this.$emit('upData', this.images)
            }
          })
        }
      })
    },
    addLink (index) {
      this.nowIndex = index
      this.showModel = true
    },
    _loadImg () {
    },
    _removeImg (file, fileList) {
      fileList.forEach((item, index) => {
        if (JSON.stringify(file.raw) === JSON.stringify(item.raw)) {
          this.images.splice(index, 1)
          this.$emit('upData', this.images)
        }
      })
    }
  }
}
</script>

<style lang="less">
.el-upload-list--picture-card .el-upload-list__item{
  width: 140px;
  height: 70px;
  display: block;
  border-radius: 0px;
}
.el-upload--picture-card{
  width: 100%;
}
.img-group--content{
  position: relative;
  .el-table__row{
    cursor: pointer;
  }
  .url-list{
    position: absolute;
    right: 15px;
    top: 0;
    overflow: hidden;
    .link-btn{
      background-color: gray;
    }
    li{
      margin-bottom: 8px;
      height: 68px;
      width: 200px;
      list-style: none;
      .el-button--default{
        width: 200px;
        text-align: center;
        margin-top: 20px;
      }
      span{
        display: block;
        float: left;
      }
    }
  }
}
</style>
